<template>
    <d2-container>
        <div>
            <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="100px">
                <el-form-item class="from_width" label="名称" prop="name">
                    <el-input placeholder="名称" v-model="detailForm.name"></el-input>
                </el-form-item>
                <el-form-item label="轮播图">
                    <el-button type="primary" size="small" @click="addBanner">添加图片</el-button>
                    <el-table :data="image">
                        <el-table-column type="index" width="50" align="center"></el-table-column>
                        <el-table-column prop="date" label="图片" width="180">
                            <template slot-scope="scope">
                                <el-upload
                                        class="avatar-uploader"
                                        :http-request="(fileObj) => handleAvatarSuccess(fileObj, 'table', scope.$index,scope )"
                                        :show-file-list="false">
                                    <img v-if="scope.row.url" :src="scope.row.url" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="name" label="排序" width="180">
                            <template slot-scope="scope">
                                <el-input-number style="width: 150px;" v-model="scope.row.sort" controls-position="right" :min="1" :max="10"/>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="removeBanner(scope.$index)" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="详情" prop="description">
                  <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="detailForm.description"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="submitForm('detailForm')">确定</el-button>
                    <el-button @click="resetForm('detailForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </d2-container>
</template>

<script>
    import uploadMixin from '../mixins/uploadMixin'
    import tableMixin from '../mixins/tableMixin'
    import { getOneProductCategory,changeProductCategory } from '@/api/admin'
  export default {
    name: 'changeProductCategory',
    components: {
    },
    mixins: [tableMixin,uploadMixin],
    data () {
      return {
        productCategoryId:undefined,
        detailForm: {
          name: '',
          description:'',
        },
        image:[],
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.getTableData()
    },
    methods: {
      // 获取列表数据
      async getTableData(value, type) {
        if(this.$route.query.id){
          this.productCategoryId = this.$route.query.id
          getOneProductCategory({id:this.productCategoryId}).then((res)=>{
            this.detailForm.name = res.data.name
            this.detailForm.description = res.data.description
            res.data.image.map(e =>{this.image.push({url:e})})
            console.log(res)
          })
        }
      },
      // 单图片上传
     async handleAvatarSuccess(file, type, index,scope) {
       const url = await this.fnUpload(file)
          this.image[index].url = url
      },
      // 添加轮播图
      addBanner() {
        this.image.push({url:""})
      },
      // 删除轮播图
      removeBanner(rowIndex) {
        this.image.splice(rowIndex, 1)
      },
      submitForm (formName) {
        let images = this.image.map(e =>{return e.url})
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {}
            data = this.detailForm
            data.id = this.productCategoryId
            data.image = images
            changeProductCategory(data).then((res)=>{
              if(res.msg == "创建成功"){
                  this.$router.push({name: 'productCategoryList'})
              }
            })
          } else {
            return false;
          }
        });
      },
      resetForm () {
        this.detailForm = this.oldDetailForm
      }
    }
  }
</script>

<style scoped>

</style>
